// resize
export const resize = {
  data() {
    return {
      chart: null
    };
  },
  mounted() {
    window.addEventListener("resize", this.screenAdapter);
    this.screenAdapter();
  },
  methods: {
    // 屏幕适配
    screenAdapter() {
      const barWidth = this.$refs.chart.offsetWidth;
      const titleFontSize = (barWidth / 100) * 3.6;
      const barBorderRadius = titleFontSize / 2;
      let radius = this.isRose ? ['10%', '80%'] : `80%`;
      const adapterOption = {
        color: [
          '#1bb2d8',
          '#3a5897',
          '#99d2dd',
          '#33ccff',
          '#88b0bb',
          '#007bb6',
          '#1c7099',
          '#038cc4',
          '#4d4d4d',
          '#b3b3ff',
          '#75abd0',
          '#afd6dd',
          '#7094db',
          '#0080ff',
          '#00bdec',
          '#ccddff',
          '#eeeeee',

        ],
        title: {
          textStyle: {
            fontSize: titleFontSize / 1.5 > 24 ? 24 : titleFontSize / 1.5
          }
        },
        // tooltip: {
        //   axisPointer: {
        //     lineStyle: {
        //       width: titleFontSize
        //     }
        //   }
        // },
        series: [
          {
            radius,
            // barWidth: titleFontSize,
            itemStyle: {
              // barBorderRadius: [barBorderRadius, barBorderRadius, 0, 0]
            }
          },
        ]
      };
      if (!this.data.compare && this.data.series.length > 1) {
        this.$set(adapterOption, 'series', [
          {
            // barWidth: titleFontSize,
            // itemStyle: {
            // barBorderRadius: [barBorderRadius, barBorderRadius, 0, 0]
            // }
          },
        ])
      }

      // 手动操作适配效果
      this.$nextTick(() => {
        adapterOption && this.chart.setOption(adapterOption);
        this.chart.resize();
      });
    }
  },

  destroyed() {
    window.removeEventListener("resize", this.screenAdapter);
  }
};
